<?php
declare(strict_types=1);

namespace LowCode\Naive;

use Illuminate\Support\Collection;
use LowCode\Naive;
use LowCode\Support\JsBind;
use LowCode\Support\JsExp;
use LowCode\Traits\Events\HasOnClose;
use LowCode\Traits\Props\HasAnimated;
use LowCode\Traits\Props\HasClosable;
use LowCode\Traits\Props\HasDefaultValue;
use LowCode\Traits\Props\HasSize;
use LowCode\Traits\Props\HasTrigger;
use LowCode\Traits\Props\HasValueModel;
use LowCode\Traits\Slots\HasSlotPrefix;
use LowCode\Traits\Slots\HasSlotSuffix;

/**
 * 组件 - 标签页 Tabs
 * @method static static make(mixed $children = null) Tabs组件
 */
class Tabs extends Naive
{
    //props
    use HasAnimated, HasDefaultValue, HasClosable, HasTrigger, HasValueModel, HasSize;
    //slots
    use HasSlotPrefix, HasSlotSuffix;
    //events
    use HasOnClose;


    protected Collection $options;

    protected string|JsExp $displayDirective = "";

    public function __construct(mixed $children = null)
    {
        parent::__construct();
        $this->defaultValue("tab_0");
        $this->options = Collection::make();
        $this->line();
        $this->children($children);
    }


    /**
     * 设置标签类型
     * @param string|JsExp $type 'bar' | 'line' | 'card' | 'segment'
     * @return $this
     */
    public function type(string|JsExp $type = 'bar' | 'line' | 'card' | 'segment'): Tabs
    {
        return $this->prop('type',$type);
    }

    /**
     * 设置条形类型的标签页
     * @return $this
     */
    public function bar(): Tabs
    {
        return $this->type('bar');
    }

    /**
     * 设置线形类型的标签页
     * @return $this
     */
    public function line(): Tabs
    {
        return $this->type('line');
    }

    /**
     * 设置卡片类型的标签页
     * @return $this
     */
    public function card(): Tabs
    {
        return $this->type('card');
    }

    /**
     * 设置分段类型的标签页
     * @return $this
     */
    public function segment(): Tabs
    {
        return $this->type('segment');
    }

    /**
     * 设置 flex 布局下主轴的排列方式，tabs标签组件只对 'line' 和 'bar' 类型生效
     * @param string|JsExp $justifyContent 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'
     * @return $this
     */
    public function justifyContent(string|JsExp $justifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' ): static
    {
        return $this->prop('justify-content',$justifyContent);
    }

    /**
     * 标签条的宽度
     * @param int|JsExp $barWidth
     * @return $this
     */
    public function barWidth(int|JsExp $barWidth): static
    {
        return $this->prop('bar-width',$barWidth);
    }

    /**
     * 面板的类名
     * @param string|JsExp $paneClass
     * @return $this
     */
    public function paneClass(string|JsExp $paneClass): static
    {
        return $this->prop("pane-class",$paneClass);
    }

    /**
     * 面板的样式
     * @param string|array|JsExp $paneStyle
     * @return $this
     */
    public function paneStyle(string|array|JsExp $paneStyle): static
    {
        return $this->prop("pane-style",$paneStyle);
    }

    /**
     * 标签的样式
     * @param string|array|JsExp $tabStyle
     * @return $this
     */
    public function tabStyle(string|array|JsExp $tabStyle): static
    {
        return $this->prop("tab-style",$tabStyle);
    }

    /**
     * 全部标签最左和最右的 padding
     * @param string|int|JsExp $tabsPadding
     * @return $this
     */
    public function tabsPadding(string|int|JsExp $tabsPadding): static
    {
        return $this->prop("tabs-padding",$tabsPadding);
    }

    /**
     * 添加标签的回调函数
     * @param string $event 函数 ()=>{}
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onAdd(string $event = "()=>{}", string $id = null, array $modifiers = []): static
    {
        return $this->event("add",jsFn($event,$id), $modifiers);
    }

    /**
     * 切换标签之前的钩子函数，返回 false 或 promise resolve false 或 promise reject 会阻止切换
     * @param string $event 函数 (name: string | number, oldName: string | number | null) => boolean | Promise<boolean>
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onBeforeLeave(string $event = "() => {}", string $id = null, array $modifiers = []): static
    {
        return $this->event("beforeLeave",jsFn($event,$id), $modifiers);
    }


    /**
     * 选择性渲染使用的指令
     * @param string|JsExp $displayDirective   'if' | 'show' | 'show:lazy' if 对应 v-if，show 对应 v-show，使用 show 的时候标签页状态切换后不会被重置，使用 show:lazy 的时候显示效果跟 show 一致，不过内容会进行延迟加载
     * @return $this
     */
    public function displayDirective(string|JsExp $displayDirective = 'if' | 'show' | 'show:lazy'): static
    {
        $this->displayDirective = $displayDirective;
        return $this;
    }


    /**
     * 设置标签页
     * @param string|JsBind $tab
     * @param mixed $children
     * @return TabPane
     */
    public function tab(string|JsBind $tab, mixed $children): TabPane
    {
        $count = $this->options->count();
        $tabPane = new TabPane("tab_".$count, $tab);
        if ($this->displayDirective){
            $tabPane->displayDirective($this->displayDirective);
        }
        $tabPane->children($children);
        $this->options->push($tabPane);
        $this->children($tabPane);
        return $tabPane;
    }


}
